<template>
  <div class="sing-sheet">
    <div class="sing-header">
      <span @click="goBack">
        <svg t="1638494314674" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2953" width="200" height="200"><path d="M643.84 164.885333a22.122667 22.122667 0 0 0-0.362667-30.72 20.522667 20.522667 0 0 0-29.674666 0.362667L256 512.810667l357.802667 378.304c8.042667 8.533333 21.290667 8.746667 29.674666 0.341333 8.32-8.32 8.533333-22.016 0.384-30.72L316.330667 512.832l327.530666-347.946667z" fill="#3D3D3D" p-id="2954"></path></svg>
      </span>
      <span>编辑歌单信息</span>
    </div>

    <div class="content">
      <div class="sing-info">
        <span>更换封面</span>
        <van-uploader :after-read="afterRead">
          <img :src="imageUrl" alt="">
        </van-uploader>
        <!-- <img :src="imageUrl"> -->
      </div>
      <div class="sing-info">
        <span>名称</span>
        <span>{{ fileName }}</span>
      </div>
      <div class="sing-info">
        <span>标签</span>
        <span>
          <van-cell-group>
            <van-field style="background:#fafafa" v-model="value" placeholder="请输入歌单标签" />
          </van-cell-group>
        </span>
      </div>
      <div class="sing-desc">
        <span>描述</span>
        <span>
          <van-cell-group>
            <van-field style="background:#fafafa" v-model="value" placeholder="暂无描述" />
          </van-cell-group>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
  import Bus from '../../common/js/bus'

  export default {
    data() {
      return {
        imageUrl:'',
        fileName:'',
        value:'',
        editShow:false,
      }
    },

    created(){
      this.imageUrl = this.$session.getItem('itemInfo').coverImgUrl;
      this.fileName = this.$session.getItem('itemInfo').name;
      // console.log(this.$route);
    },

    // mounted:function(){
    //   Bus.$on('imageurl',(e) => {
    //     this.imageUrl = e;
    //     // console.log(this.imageUrl);
    //   });
    //   Bus.$on('singname', (e) => {
    //     this.fileName = e;
    //   })
    // },

    methods:{
      goBack(){
        this.$router.back();
        this.editShow = false;
        // console.log(this.editShow);
        Bus.$emit('editshow',this.editShow);
      },

      afterRead(file) {
        // 此时可以自行将文件上传至服务器
        console.log(file);
      },
    }
  }
</script>

<style scoped>
.sing-sheet{
  height: 100%;
  background: #eceae8;
}

.sing-header{
  background: #fafafa;
  padding: 10px;
  display: flex;
  align-items: center;
}

.content{
  margin-top: 10px;
  background: #fafafa;
}

.sing-info{
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eceae8;
}

.sing-info img{
  width: 50px;
  height: 50px;
}

.sing-desc{
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>